<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:include="include/head::commonHeaderView('学员阶段检测反馈查看',~{::style})">
    <style>
        .thumbnail>p{
            text-align: center;
            font-weight: bold;
        }
        .thumbnailFloat{
            margin-top: 5px;
            margin-left: 5px;
            margin-right: 10px;
            margin-bottom: 5px !important;
            float: left;
        }
        .thumbnailWidth{
            width: 80px;
        }
    </style>
</head>
<body>
<div class="ch-container">
    <div class="row" style="margin: 10px 10px;">
        <table cellpadding="20" cellspacing="0">
            <tbody>
            <tr>
                <td colSpan="2" class="text-center">
                    <div style="position: relative; width: 100%; height: 100%; top: 208px" th:text="${#strings.concat(feedbackTable.startDate,' 至 ',feedbackTable.endDate)}"></div>
                    <img th:src="@{/static/img/feedbackTitle.jpg}" width="100%" style="vertical-align: bottom">
                </td>
            </tr>
            <tr>
                <td colSpan="2" style="border: 1px solid #4aa72b;padding: 10px 20px;">
                    <table style="width: 80%">
                        <tr>
                            <td>姓名：<span style="border-bottom: 2px solid #aaa" th:utext="${'&nbsp;&nbsp;'+feedbackTable.cnName+'&nbsp;&nbsp;'}"></span></td>
                            <td>学号：<span style="border-bottom: 2px solid #aaa" th:utext="${'&nbsp;&nbsp;'+feedbackTable.loginName+'&nbsp;&nbsp;'}"></span></td>
                            <td>年级：<span style="border-bottom: 2px solid #aaa" th:utext="${'&nbsp;&nbsp;'+feedbackTable.grade+'&nbsp;&nbsp;'}"></span></td>

                            <td>课程顾问：<span style="border-bottom: 2px solid #aaa" th:utext="${'&nbsp;&nbsp;'+feedbackTable.ccCnName+'&nbsp;&nbsp;'}"></span></td>
                            <td>学管师：<span style="border-bottom: 2px solid #aaa" th:utext="${'&nbsp;&nbsp;'+feedbackTable.ltCnName+'&nbsp;&nbsp;'}"></span></td>
                        </tr>

                    </table>
                </td>
            </tr>
            <tr>
                <td class="text-center" style="border: 1px solid #4aa72b;border-top: none;white-space: nowrap;padding: 10px 20px;">总体情况</td>
                <td style="border: 1px solid #4aa72b;border-left: none;padding: 10px 10px;">
                    <div class="thumbnail thumbnailFloat">
                        <p th:text="完成课时"></p>
                        <p style="color: red;" th:text="${feedbackTable.classNum}"></p>
                    </div>
                    <div class="thumbnail thumbnailFloat">
                        <p th:text="获得星星"></p>
                        <p style="color: red;" th:text="${feedbackTable.starNum}"></p>
                    </div>
                    <div class="thumbnail thumbnailFloat">
                        <p th:text="旷课次数"></p>
                        <p style="color: red;" th:text="${feedbackTable.noShowNum==null?0:feedbackTable.noShowNum}"></p>
                    </div>
                    <div class="thumbnail thumbnailFloat">
                        <p th:text="被点名数"></p>
                        <p style="color: red;" th:text="${feedbackTable.namedNum==null?0:feedbackTable.namedNum}"></p>
                    </div>
                    <div class="thumbnail thumbnailFloat">
                        <p th:text="迟到次数"></p>
                        <p style="color: red;" th:text="${feedbackTable.lateNum==null?0:feedbackTable.lateNum}"></p>
                    </div>
                    <div class="thumbnail thumbnailFloat">
                        <p th:text="听力理解"></p>
                        <p style="color: red;" th:text="${feedbackTable.listenAve}"></p>
                    </div>
                    <div class="thumbnail thumbnailFloat">
                        <p th:text="发音准确"></p>
                        <p style="color: red;" th:text="${feedbackTable.pronunciationAve}"></p>
                    </div>
                    <div class="thumbnail thumbnailFloat">
                        <p th:text="词汇掌握"></p>
                        <p style="color: red;" th:text="${feedbackTable.vocabularyAve}"></p>
                    </div>
                    <div class="thumbnail thumbnailFloat">
                        <p th:text="语法掌握"></p>
                        <p style="color: red;" th:text="${feedbackTable.grammarAve}"></p>
                    </div>
                    <div class="thumbnail thumbnailFloat">
                        <p th:text="口语流利"></p>
                        <p style="color: red;" th:text="${feedbackTable.spokenAve}"></p>
                    </div>
                    <div class="thumbnail thumbnailFloat">
                        <p th:text="参与度"></p>
                        <p style="color: red;" th:text="${feedbackTable.participationAve}"></p>
                    </div>
                    <div class="thumbnail thumbnailFloat">
                        <p th:text="专注度"></p>
                        <p style="color: red;" th:text="${feedbackTable.concentrationAve}"></p>
                    </div>
                </td>
            </tr>
            <tr>
                <td style="border: 1px solid #4aa72b;vertical-align: middle;background-color: #7ac450;padding: 10px 20px;" class="text-center">近期进步项<br/>&已掌握知识点</td>
                <td style="border: 1px solid #4aa72b;border-left: none;padding: 10px 10px;" th:utext="${feedbackTable.masteredKnowledge}"></td>
            </tr>
            <tr>
                <td align="center" style="border: 1px solid #4aa72b;border-top: none;white-space: nowrap;padding: 10px 20px;">近期薄弱项<br/>&外教着重练习</td>
                <td style="border: 1px solid #4aa72b;border-left: none;border-top: none;padding: 10px 10px;" th:utext="${feedbackTable.notMasteredKnowledge}"></td>
            </tr>
            <tr>
                <td align="center" style="border: 1px solid #4aa72b;border-top: none;padding: 10px 20px;background-color: #7ac450;">近期学习建议</td>
                <td style="border: 1px solid #4aa72b;border-left: none;border-top: none;padding: 10px 10px;" th:utext="${feedbackTable.studySuggestions}"></td>
            </tr>
            <tr>
                <td style="border: 1px solid #4aa72b;vertical-align: middle;border-top: none;padding: 10px 20px;" class="text-center">近期上课频率建议</td>
                <td style="border: 1px solid #4aa72b;border-left: none;border-top: none;padding: 10px 10px;" th:utext="${feedbackTable.studyFrequency}"></td>
            </tr>
            <tr>
                <td align="center" style="border: 1px solid #4aa72b;border-top:none;padding: 10px 20px;background-color: #7ac450;" class="text-center">近期上课内容建议</td>
                <td style="border: 1px solid #4aa72b; border-left: none; border-top: none;padding: 10px 10px;" th:utext="${feedbackTable.studyContents}"></td>
            </tr>
            <tr>
                <td style="border: 1px solid #4aa72b;vertical-align: middle;border-top: none;padding: 10px 20px;" class="text-center">课堂纪律反馈</td>
                <td style="border: 1px solid #4aa72b;border-left: none;border-top: none;padding: 10px 10px;" th:utext="${feedbackTable.teaComplaint}"></td>
            </tr>
            <tr th:if="${feedbackTable.testResults!=null && feedbackTable.testResults!=''}">
                <td style="border: 1px solid #4aa72b;vertical-align: middle;background-color: #7ac450;border-top: none;padding: 10px 20px;" class="text-center">测试成绩</td>
                <td style="border: 1px solid #4aa72b;border-left: none;border-top: none;padding: 10px 10px;" th:utext="${feedbackTable.testResults}"></td>
            </tr>
            <tr th:if="${feedbackTable.homework!=null && feedbackTable.homework!=''}">
                <td style="border: 1px solid #4aa72b;vertical-align: middle;background-color: #7ac450;border-top: none;padding: 10px 20px;" class="text-center">课后作业完成情况</td>
                <td style="border: 1px solid #4aa72b;border-left: none;border-top: none;padding: 10px 10px;" th:utext="${feedbackTable.homework}"></td>
            </tr>
            <tr>
                <td style="border: 1px solid #4aa72b;vertical-align: middle;background-color: #7ac450;border-top: none;padding: 10px 20px;" class="text-center">调整页码和调整日期</td>
                <td style="border: 1px solid #4aa72b;border-left: none;border-top: none;padding: 10px 10px;" th:utext="${feedbackTable.changeMaterial}"></td>
            </tr>
            </tbody>
        </table>
    </div>
    <div class="divTable" style="width:1800px;background-color: #FFFFFF;display: none;">
        <table cellpadding="20" cellspacing="0" style="font-size: 30px;">
        <tbody>
        <tr>
            <td colSpan="2" class="text-center">
                <div style="position: relative; width: 100%; height: 100%; top: 208px" th:text="${#strings.concat(feedbackTable.startDate,' 至 ',feedbackTable.endDate)}"></div>
                <img th:src="@{/static/img/feedbackTitle.jpg}" width="100%" style="vertical-align: bottom">
            </td>
        </tr>
        <tr>
            <td colSpan="2" style="border: 1px solid #4aa72b;padding: 10px 20px;">
            <table style="width: 80%">
                <tr>
                    <td>姓名：<span style="border-bottom: 2px solid #aaa" th:utext="${'&nbsp;&nbsp;'+feedbackTable.cnName+'&nbsp;&nbsp;'}"></span></td>
                    <td>学号：<span style="border-bottom: 2px solid #aaa" th:utext="${'&nbsp;&nbsp;'+feedbackTable.loginName+'&nbsp;&nbsp;'}"></span></td>
                    <td>年级：<span style="border-bottom: 2px solid #aaa" th:utext="${'&nbsp;&nbsp;'+feedbackTable.grade+'&nbsp;&nbsp;'}"></span></td>

                    <td>课程顾问：<span style="border-bottom: 2px solid #aaa" th:utext="${'&nbsp;&nbsp;'+feedbackTable.ccCnName+'&nbsp;&nbsp;'}"></span></td>
                    <td>学管师：<span style="border-bottom: 2px solid #aaa" th:utext="${'&nbsp;&nbsp;'+feedbackTable.ltCnName+'&nbsp;&nbsp;'}"></span></td>
                </tr>

            </table>
            </td>
        </tr>
        <tr>
            <td class="text-center" style="border: 1px solid #4aa72b;border-top: none;white-space: nowrap;padding: 10px 20px;">总体情况</td>
            <td style="border: 1px solid #4aa72b;border-left: none;padding: 10px 10px;">
                <div class="thumbnail thumbnailFloat thumbnailWidth">
                    <p th:text="完成课时"></p>
                    <p style="color: red;" th:text="${feedbackTable.classNum}"></p>
                </div>
                <div class="thumbnail thumbnailFloat thumbnailWidth">
                    <p th:text="获得星星"></p>
                    <p style="color: red;" th:text="${feedbackTable.starNum}"></p>
                </div>
                <div class="thumbnail thumbnailFloat thumbnailWidth">
                    <p th:text="旷课次数"></p>
                    <p style="color: red;" th:text="${feedbackTable.noShowNum==null?0:feedbackTable.noShowNum}"></p>
                </div>
                <div class="thumbnail thumbnailFloat thumbnailWidth">
                    <p th:text="被点名数"></p>
                    <p style="color: red;" th:text="${feedbackTable.namedNum==null?0:feedbackTable.namedNum}"></p>
                </div>
                <div class="thumbnail thumbnailFloat thumbnailWidth">
                    <p th:text="迟到次数"></p>
                    <p style="color: red;" th:text="${feedbackTable.lateNum==null?0:feedbackTable.lateNum}"></p>
                </div>
                <div class="thumbnail thumbnailFloat thumbnailWidth">
                    <p th:text="听力理解"></p>
                    <p style="color: red;" th:text="${feedbackTable.listenAve}"></p>
                </div>
                <div class="thumbnail thumbnailFloat thumbnailWidth">
                    <p th:text="发音准确"></p>
                    <p style="color: red;" th:text="${feedbackTable.pronunciationAve}"></p>
                </div>
                <div class="thumbnail thumbnailFloat thumbnailWidth">
                    <p th:text="词汇掌握"></p>
                    <p style="color: red;" th:text="${feedbackTable.vocabularyAve}"></p>
                </div>
                <div class="thumbnail thumbnailFloat thumbnailWidth">
                    <p th:text="语法掌握"></p>
                    <p style="color: red;" th:text="${feedbackTable.grammarAve}"></p>
                </div>
                <div class="thumbnail thumbnailFloat thumbnailWidth">
                    <p th:text="口语流利"></p>
                    <p style="color: red;" th:text="${feedbackTable.spokenAve}"></p>
                </div>
                <div class="thumbnail thumbnailFloat thumbnailWidth">
                    <p th:text="参与度"></p>
                    <p style="color: red;" th:text="${feedbackTable.participationAve}"></p>
                </div>
                <div class="thumbnail thumbnailFloat thumbnailWidth">
                    <p th:text="专注度"></p>
                    <p style="color: red;" th:text="${feedbackTable.concentrationAve}"></p>
                </div>
            </td>
        </tr>
        <tr>
            <td style="border: 1px solid #4aa72b;vertical-align: middle;background-color: #7ac450;padding: 10px 20px;" class="text-center">近期进步项<br/>&已掌握知识点</td>
            <td style="border: 1px solid #4aa72b;border-left: none;padding: 10px 10px;" th:utext="${feedbackTable.masteredKnowledge}"></td>
        </tr>

        <tr>
            <td align="center" style="border: 1px solid #4aa72b;border-top: none;white-space: nowrap;padding: 10px 20px;">近期薄弱项<br/>&外教着重练习</td>
            <td style="border: 1px solid #4aa72b;border-left: none;border-top: none;padding: 10px 10px;" th:utext="${feedbackTable.notMasteredKnowledge}"></td>
        </tr>
        <tr>
            <td align="center" style="border: 1px solid #4aa72b;border-top: none;background-color: #7ac450;padding: 10px 20px;">近期学习建议</td>
            <td style="border: 1px solid #4aa72b;border-left: none;border-top: none;padding: 10px 10px;" th:utext="${feedbackTable.studySuggestions}"></td>
        </tr>
        <tr>
            <td style="border: 1px solid #4aa72b;vertical-align: middle;border-top: none;padding: 10px 20px;" class="text-center">近期上课频率建议</td>
            <td style="border: 1px solid #4aa72b;border-left: none;border-top: none;padding: 10px 10px;" th:utext="${feedbackTable.studyFrequency}"></td>
        </tr>
        <tr>
            <td align="center" style="border: 1px solid #4aa72b;border-top:none;background-color: #7ac450;padding: 10px 20px;" class="text-center">近期上课内容建议</td>
            <td style="border: 1px solid #4aa72b; border-left: none; border-top: none;padding: 10px 10px;" th:utext="${feedbackTable.studyContents}"></td>
        </tr>
        <tr>
            <td style="border: 1px solid #4aa72b;vertical-align: middle;border-top: none;padding: 10px 20px;" class="text-center">课堂纪律反馈</td>
            <td style="border: 1px solid #4aa72b;border-left: none;border-top: none;padding: 10px 10px;" th:utext="${feedbackTable.teaComplaint}"></td>
        </tr>
        <tr th:if="${feedbackTable.testResults!=null && feedbackTable.testResults!=''}">
            <td style="border: 1px solid #4aa72b;vertical-align: middle;background-color: #7ac450;border-top: none;padding: 10px 20px;" class="text-center">测试成绩</td>
            <td style="border: 1px solid #4aa72b;border-left: none;border-top: none;padding: 10px 10px;" th:utext="${feedbackTable.testResults}"></td>
        </tr>
        <tr th:if="${feedbackTable.homework!=null && feedbackTable.homework!=''}">
            <td style="border: 1px solid #4aa72b;vertical-align: middle;background-color: #7ac450;border-top: none;padding: 10px 20px;" class="text-center">课后作业完成情况</td>
            <td style="border: 1px solid #4aa72b;border-left: none;border-top: none;padding: 10px 10px;" th:utext="${feedbackTable.homework}"></td>
        </tr>
        <tr>
            <td style="border: 1px solid #4aa72b;vertical-align: middle;background-color: #7ac450;border-top: none;padding: 10px 20px;" class="text-center">调整页码和调整日期</td>
            <td style="border: 1px solid #4aa72b;border-left: none;border-top: none;padding: 10px 10px;" th:utext="${feedbackTable.changeMaterial}"></td>
        </tr>
        </tbody>
        </table>
    </div>

</div>
<div th:include="include/onload_js::onloadViewJS(~{::script})">
    <script type="text/javascript" src="../../static/js/html2canvas.js" th:src="@{/static/js/html2canvas.js}"></script>
    <script type="text/javascript" src="../../static/js/jsPdf.debug.js" th:src="@{/static/js/jsPdf.debug.js}"></script>
    <script>
        $(function () {

            let errMsg="[[${errMsg}]]";
            if (errMsg!==""){
                layer.msg(errMsg,{icon:2});
            }
            savePdf()
        })

        function savePdf() {
            $(".divTable").show();
            // 生成PDF
            html2canvas(document.querySelector(".divTable"), {
                scale: 2,
                useCORS: true,
                onrendered: function (canvas) {
                    var contentWidth = canvas.width;
                    var contentHeight = canvas.height;
                    //一页pdf显示html页面生成的canvas高度;
                    var pageHeight = contentWidth / 595.28 * 841.89;
                    //未生成pdf的html页面高度
                    var leftHeight = contentHeight;
                    //pdf页面偏移
                    var position = 0;
                    //a4纸的尺寸[595.28,841.89]，html页面生成的canvas在pdf中图片的宽高
                    var imgWidth = 575.28;
                    var imgHeight = 555.28 / contentWidth * contentHeight;

                    var pageData = canvas.toDataURL('image/jpeg', 1.0);

                    var pdf = new jsPDF('', 'pt', 'a4');
                    // 有两个高度需要区分，一个是html页面的实际高度，和生成pdf的页面高度(841.89)
                    // pdf.addImage(pageData, 'JPEG', 20, 0, imgWidth, imgHeight);
                    // 当内容未超过pdf一页显示的范围，无需分页
                    if (leftHeight < pageHeight) {
                        pdf.addImage(pageData, 'JPEG', 10, 0, imgWidth, imgHeight );
                    } else {
                        while(leftHeight > 0) {
                            pdf.addImage(pageData, 'JPEG', 10, position, imgWidth, imgHeight)
                            leftHeight -= pageHeight;
                            position -= 841.89;
                            //避免添加空白页
                            if(leftHeight > 0) {
                                pdf.addPage();
                            }
                        }
                    }
                    let d=new Date();
                    let pdfName="Etalk阶段检测反馈_[[${feedbackTable.cnName}]]([[${feedbackTable.loginName}]])"+d.getTime();
                    pdf.save(pdfName);
                    $(".divTable").hide();
                    parent.location.reload(true);
                }
            })
        }
    </script>
</div>
</body>
</html>